Select URL API की मदद से विज्ञापन क्रिएटिव घुमाना

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

Shared Storage का फ़ायदा पाने के लिए, Select URL API का इस्तेमाल करें. इससे यह तय किया जा सकता है कि उपयोगकर्ता को सभी साइटों पर कौनसा क्रिएटिव दिखे.

विज्ञापन देने वाला कोई व्यक्ति या कॉन्टेंट प्रोड्यूसर, किसी कैंपेन में कॉन्टेंट रोटेशन की अलग-अलग रणनीतियां लागू कर सकता है. साथ ही, असर बढ़ाने के लिए कॉन्टेंट या क्रिएटिव को रोटेट कर सकता है. Select URL API का इस्तेमाल, अलग-अलग साइटों पर रोटेशन की अलग-अलग रणनीतियों को चलाने के लिए किया जा सकता है. जैसे, क्रम से रोटेशन और बराबर-बराबर रोटेशन.

Select URL API क्रिएटिव रोटेशन की मदद से, क्रिएटिव आईडी, व्यू की संख्या, और उपयोगकर्ता इंटरैक्शन जैसे डेटा को सेव किया जा सकता है. इससे यह तय किया जा सकता है कि उपयोगकर्ताओं को अलग-अलग साइटों पर कौनसा क्रिएटिव दिखे.

इस एपीआई और यूआरएल चुनने के तरीके के बारे में ज़्यादा जानने के लिए, Select URL API के दस्तावेज़ को एक्सप्लोर करें.

क्रिएटिव रोटेशन आज़माएं

क्रिएटिव रोटेशन के साथ प्रयोग करने के लिए, पक्का करें कि Select URL API और शेयर किया गया स्टोरेज चालू हो:

• chrome://settings/content/siteData में, Allow sites to save data on your device या Delete data sites have saved to your device when you close all windows चुनें.
• chrome://settings/adPrivacy/sites में, Site-suggested ads चुनें.

इस दस्तावेज़ में दिए गए कोड सैंपल के लाइव वर्शन के लिए, Shared Storage का लाइव डेमो आज़माएं.

कोड सैंपल के साथ डेमो

इस उदाहरण में:

• creative-rotation.js, तीसरे पक्ष की वह स्क्रिप्ट है जो रोटेट किए जाने वाले कॉन्टेंट के साथ-साथ, उस डेटा की जानकारी देती है जिससे यह तय होता है कि अगला कॉन्टेंट क्या चुनना है और उसे कैसे दिखाना है. जैसे, इस उदाहरण में वज़न. पब्लिशर पेज, इस स्क्रिप्ट को लागू करता है. यह स्क्रिप्ट, शेयर किए गए स्टोरेज के वर्कलेट को कॉल करती है, ताकि यह तय किया जा सके कि स्टोरेज में मौजूद डेटा और चुनने के लिए उपलब्ध यूआरएल की सूची के आधार पर कौनसा कॉन्टेंट दिखाया जाए.

• creative-rotation-worklet.js, तीसरे पक्ष का शेयर किया गया स्टोरेज वर्कलेट है. यह रोटेशन की रणनीति देखता है और यह हिसाब लगाता है कि अगला कॉन्टेंट क्या पब्लिश करना है. साथ ही, वह कॉन्टेंट दिखाता है.

डेमो कैसे काम करता है

1. जब कोई उपयोगकर्ता पब्लिशर पेज पर जाता है, तो पेज तीसरे पक्ष की creative-rotation.js स्क्रिप्ट लोड करता है. क्रिएटिव रोटेशन स्क्रिप्ट, शेयर किए गए स्टोरेज वर्कलेट को लोड और चलाने के लिए ज़िम्मेदार होती है. स्क्रिप्ट, वर्कलेट कॉल को यूआरएल की सूची देती है, ताकि उनमें से कोई एक चुना जा सके.
2. अगर वर्कलेट में, शेयर किए गए स्टोरेज को अब तक शुरू नहीं किया गया है, तो स्टोरेज को शुरुआती क्रिएटिव रोटेशन की रणनीति और क्रिएटिव इंडेक्स के साथ शुरू किया जाता है. इस डेमो में इस्तेमाल की गई शुरुआती रोटेशन रणनीति, क्रम से चलने वाली रणनीति है.
3. वर्कलेट, शेयर किए गए स्टोरेज से रोटेशन मोड को पढ़ता है और अगले विज्ञापन का इंडेक्स दिखाता है. क्रम से रोटेशन मोड के मामले में, यह शेयर किए गए स्टोरेज में क्रिएटिव इंडेक्स को भी अपडेट करता है. साथ ही, अगले कॉल के लिए इस्तेमाल की जाने वाली नई वैल्यू भी अपडेट करता है. यह वर्कलेट, selectURL को कॉल करते समय इस्तेमाल की गई resolveToConfig वैल्यू के आधार पर, FencedFrameConfig या पारदर्शी नहीं होने वाला URN ऑब्जेक्ट दिखाता है.
4. क्रिएटिव-रोटेशन स्क्रिप्ट, चुने गए विज्ञापन को फ़ेंस किए गए फ़्रेम या iframe में दिखाती है. विज्ञापन लौटाने के तरीकों के बारे में जानकारी के लिए, विज्ञापन दस्तावेज़ रेंडर करना लेख पढ़ें.
5. जब कोई उपयोगकर्ता रोटेशन मोड बदलता है, तो Shared Storage वर्कलेट, Shared Storage में सेव की गई क्रिएटिव रोटेशन मोड की वैल्यू को अपडेट करता है.
6. पब्लिशर पेज को रीलोड करने पर, पहला से चौथा चरण दोहराया जाता है. इससे, रोटेशन की चुनी गई रणनीति के आधार पर अगला विज्ञापन चुना जा सकता है

कोड सैंपल

यहां creative-rotation.js और creative-rotation-worklet.js के लिए कोड के सैंपल दिए गए हैं.

creative-rotation.js

const contentProducerUrl = 'https://your-server.example';

// Ad config with the URL of the ad, a probability weight for rotation, and the clickthrough rate.
const DEMO_AD_CONFIG = [
  {
    url: `${contentProducerUrl}/ads/ad-1.html`,
    weight: 0.7,
  },
  {
    url: `${contentProducerUrl}/ads/ad-2.html`,
    weight: 0.2,
  },
  {
    url: `${contentProducerUrl}/ads/ad-3.html`,
    weight: 0.1,
  },
];

async function setRotationMode(rotationMode) {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  await creativeRotationWorklet.run('set-rotation-mode', {
    data: { rotationMode }
  });
  console.log(`creative rotation mode set to ${rotationMode}`);
}

async function injectAd() {
  // Load the worklet module
  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`,
    { dataOrigin: 'script-origin' }
  );

  const urls = DEMO_AD_CONFIG.map(({ url }) => ({ url }));

  // Resolve the selectURL call to a fenced frame config only when it exists on the page
  const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';

  // Run the URL selection operation to determine the next ad that should be rendered
  const selectedUrl = await creativeRotationWorklet.selectURL('creative-rotation', urls, {
    data: DEMO_AD_CONFIG,
    resolveToConfig
  });

  const adSlot = document.getElementById('ad-slot');

  if (resolveToConfig && selectedUrl instanceof FencedFrameConfig) {
    adSlot.config = selectedUrl;
  } else {
    adSlot.src = selectedUrl;
  }
}

injectAd();

creative-rotation-worklet.js

class SelectURLOperation {
  async run(urls, data) {
    // Initially set the storage to sequential mode for the demo
    await SelectURLOperation.seedStorage();

    // Read the rotation mode from Shared Storage
    const rotationMode = await sharedStorage.get('creative-rotation-mode');

    // Generate a random number to be used for rotation
    const randomNumber = Math.random();

    let index;

    switch (rotationMode) {
      /**
       * Sequential rotation
       * - Rotates the creatives in order
       * - Example: A -> B -> C -> A ...
       */
      case 'sequential':
        const currentIndex = await sharedStorage.get('creative-rotation-index');
        index = parseInt(currentIndex, 10);
        const nextIndex = (index + 1) % urls.length;

        console.log(`index = ${index} / next index = ${nextIndex}`);

        await sharedStorage.set('creative-rotation-index', nextIndex.toString());
        break;

      /**
       * Evenly-distributed rotation
       * - Rotates the creatives with equal probability
       * - Example: A=33% / B=33% / C=33%
       */
      case 'even-distribution':
        index = Math.floor(randomNumber * urls.length);
        break;

      /**
       * Weighted rotation
       * - Rotates the creatives with weighted probability
       * - Example: A=70% / B=20% / C=10%
       */
      case 'weighted-distribution':
        console.log('data = ', JSON.stringify(data));
        // Find the first URL where the cumnulative sum of the weights
        // exceed the random number. The array is sorted by the weight
        // in descending order.
        let weightSum = 0;
        const { url } = data
          .sort((a, b) => b.weight - a.weight)
          .find(({ weight }) => {
            weightSum += weight;
            return weightSum > randomNumber;
          });

        index = urls.indexOf(url);
        break;

      default:
        index = 0;
    }

    console.log(JSON.stringify({ index, randomNumber, rotationMode }));
    return index;
  }

  // Set the mode to sequential and set the starting index to 0.
  static async seedStorage() {
    await sharedStorage.set('creative-rotation-mode', 'sequential', {
      ignoreIfPresent: true,
    });

    await sharedStorage.set('creative-rotation-index', 0, {
      ignoreIfPresent: true,
    });
  }
}

class SetRotationModeOperation {
  async run({ rotationMode }) {
    await sharedStorage.set('creative-rotation-mode', rotationMode);
  }
}

// Register the operation as 'creative-rotation'
register('creative-rotation', SelectURLOperation);
register('set-rotation-mode', SetRotationModeOperation);

स्क्रीनशॉट के साथ निर्देश

1. Select URL API और शेयर किए गए स्टोरेज का इस्तेमाल करके क्रिएटिव रोटेशन को ऐक्सेस करने के लिए, https://shared-storage-demo.web.app/ पर जाएं. 'क्रिएटिव रोटेशन' डेमो चुनें.

2. 'पब्लिशर A' के तौर पर डेमो को एक्सप्लोर करने का विकल्प चुनें. आपको https://shared-storage-demo-publisher-a.web.app/creative-rotation पर रीडायरेक्ट कर दिया जाएगा. यह पेज, शेयर किए गए स्टोरेज में सेव किए गए क्रिएटिव रोटेशन डेटा के आधार पर, नंबर वाला कॉन्टेंट लोड करता है. इस डेटा को Select URL API के ज़रिए ऐक्सेस किया जाता है. क्रिएटिव रोटेशन के लिए, डेमो मोड में क्रम से चलने वाला, बराबर डिस्ट्रिब्यूशन, और वेटेड डिस्ट्रिब्यूशन शामिल हैं. वर्कलेट, iframe में दिखने वाले कॉन्टेंट को चुनने के लिए लॉजिक लागू करता है. यहां दी गई इमेज में पब्लिशर पेज दिखाया गया है.

   
   

3. Shared Storage में सेव की गई चीज़ें देखने के लिए, Chrome DevTools में ऐप्लिकेशन -> Shared Storage पर जाएं. शेयर किए गए स्टोरेज के लिए दो एंट्री बनाई जाती हैं. https://shared-storage-demo-publisher-a.web.app ऑरिजिन के लिए, खाली स्टोरेज उपलब्ध है. इसमें उस ऑरिजिन के लिए खास स्टोरेज होगा. यह हमारे डेमो के लिए खाली रहेगा, क्योंकि पब्लिशर को शेयर किए गए स्टोरेज में लिखने की ज़रूरत नहीं है. ध्यान दें कि डेमो के लिए बाद में उस पेज पर जाने पर, पब्लिशर B के लिए भी ऐसा ही स्टोरेज बनाया जाएगा.

   
   

4. https://shared-storage-demo-content-producer.web.app ऑरिजिन के लिए, Shared Storage की एक और एंट्री बनाई जाएगी. यह पब्लिशर पेज पर एम्बेड किए गए तीसरे पक्ष के iframe का स्टोरेज है. इस स्टोरेज का इस्तेमाल, क्रिएटिव चुनने के लिए उपलब्ध दो पब्लिशर के बीच डेटा शेयर करने के लिए किया जाएगा. इस शेयर किए गए स्टोरेज का इस्तेमाल, दो की-वैल्यू पेयर सेव करके, दिखाए गए क्रिएटिव और रोटेशन की रणनीति के बारे में जानकारी सेव करने के लिए किया जाएगा. डेमो में इस्तेमाल की गई पहली कुंजी creative-rotation-index है, जिसकी वैल्यू क्रम के हिसाब से मौजूदा क्रिएटिव इंडेक्स है. दूसरी कुंजी creative-rotation-mode है, जो इस्तेमाल की गई रोटेशन रणनीति तय करती है.

   
   

5. क्रम से चलने वाले मोड में पेज को रीफ़्रेश करने पर, अगला क्रिएटिव 1, 2, 3, 1, … क्रम में दिखेगा. क्रम से चलने वाले मोड में, दिखाए गए क्रिएटिव के इंडेक्स के हिसाब से, मुख्य क्रिएटिव-रोटेशन-इंडेक्स की वैल्यू बदल जाएगी.

   
   

6. कंट्रोल बटन का इस्तेमाल करके क्रिएटिव रोटेशन मोड बदलने पर, उससे जुड़ी रणनीति में क्रिएटिव-रोटेशन-मोड की वैल्यू अपडेट हो जाएगी. वर्कलेट कोड इसका इस्तेमाल, iframe में दिखाए जाने वाले अगले क्रिएटिव को चुनने के लिए करेगा. ध्यान दें कि क्रिएटिव-रोटेशन-इंडेक्स के लिए सेव की गई वैल्यू, क्रम से चलने वाले रोटेशन मोड के अलावा अन्य रोटेशन मोड के लिए नहीं बदलती.

   
   

7. https://shared-storage-demo-publisher-b.web.app/creative-rotation पर जाकर, "पब्लिशर B" के पेज पर जाएं. क्रम से चलने वाले मोड में, "पब्लिशर A" के यूआरएल पर जाने पर, दिखाया गया क्रिएटिव, दिखाए गए क्रम में अगला क्रिएटिव होना चाहिए. कॉन्टेंट क्रिएटर के लिए शेयर किए गए स्टोरेज की जांच करने पर, आपको पता चल सकता है कि "पब्लिशर A" और "पब्लिशर B", दोनों एक ही स्टोरेज शेयर करते हैं. साथ ही, वे वहां मौजूद सेटिंग का इस्तेमाल करके, अगला क्रिएटिव चुन रहे हैं और रोटेशन की रणनीति का इस्तेमाल कर रहे हैं.

   
   

8. "पब्लिशर B" के लिए शेयर किया गया स्टोरेज खाली है, ठीक उसी तरह जैसे "पब्लिशर A" के लिए शेयर किया गया स्टोरेज खाली है.

   
   

   उपयोग के उदाहरण

   Select URL API के इस्तेमाल के सभी उपलब्ध उदाहरण, इस सेक्शन में देखे जा सकते हैं. हमें सुझाव, राय, और शिकायत मिलने पर, हम नए उदाहरण जोड़ते रहेंगे. साथ ही, नए टेस्ट केस भी जोड़ते रहेंगे.

   • विज्ञापन क्रिएटिव को रोटेट करना: क्रिएटिव आईडी और उपयोगकर्ता इंटरैक्शन जैसे डेटा को सेव करें, ताकि यह पता लगाया जा सके कि उपयोगकर्ताओं को अलग-अलग साइटों पर कौनसा क्रिएटिव दिखता है.
   • फ़्रीक्वेंसी के हिसाब से विज्ञापन क्रिएटिव चुनना: व्यू की संख्या के डेटा का इस्तेमाल करके यह तय करें कि उपयोगकर्ताओं को अलग-अलग साइटों पर कौनसा क्रिएटिव दिखे.
   • A/B टेस्टिंग करना: किसी उपयोगकर्ता को एक्सपेरिमेंट ग्रुप में असाइन किया जा सकता है. इसके बाद, उस ग्रुप को Shared Storage में सेव किया जा सकता है, ताकि उसे अलग-अलग साइटों से ऐक्सेस किया जा सके.
   • पहचाने गए ग्राहकों के लिए अनुभव को पसंद के मुताबिक बनाना: उपयोगकर्ता के रजिस्ट्रेशन स्टेटस या अन्य स्थितियों के आधार पर, कस्टम कॉन्टेंट और कॉल-टू-ऐक्शन शेयर करें.

दर्शकों से जुड़ना और सुझाव, राय या शिकायत शेयर करना

ध्यान दें कि Select URL API के प्रस्ताव पर फ़िलहाल चर्चा की जा रही है और इसे डेवलप किया जा रहा है. इसमें बदलाव किया जा सकता है.

हमें Select URL API के बारे में आपके विचार जानने में दिलचस्पी है.

• प्रस्ताव: ज़्यादा जानकारी वाले प्रस्ताव की समीक्षा करें.
• चर्चा: सवाल पूछने और अपनी अहम जानकारी शेयर करने के लिए, चल रही चर्चा में शामिल हों.

अप-टू-डेट रहना

• मेल सूची: चुनिंदा यूआरएल और शेयर किए गए स्टोरेज एपीआई से जुड़े नए अपडेट और सूचनाओं के लिए, हमारी मेलिंग सूची की सदस्यता लें.

क्या आपको मदद चाहिए?

• डेवलपर सहायता: दूसरे डेवलपर से जुड़ें और Privacy Sandbox के डेवलपर सहायता रिपॉज़िटरी में अपने सवालों के जवाब पाएं.